<template>
  <d2-container>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="敞口趋势日明细表" name="first">
        <el-card shadow="never" class="d2-mb">
          <el-form :inline="true" :model="first_form" class="demo-form-inline">
            <!-- <el-form-item label="部门名称">
              <el-select v-model="first_form.department" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in first_select_data_bm"
                    :key="item.department_id"
                    :label="item.department_name"
                    :value="item.department_id">
                  </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="品名">
              <el-select
                v-model="first_form.commodity"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in first_select_data_pm"
                  :key="item.commodity_id"
                  :label="item.name"
                  :value="item.commodity_id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向">
              <el-select
                v-model="first_form.direction"
                placeholder="请选择"
                clearable
              >
                <el-option label="采购" value="0"></el-option>
                <el-option label="销售" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期:">
              <el-date-picker
                type="date"
                v-model="first_form.start_date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
              -
              <el-date-picker
                type="date"
                clearable
                v-model="first_form.end_date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="select_fn()">查询</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <div class="mb">
          <el-button size="small">导出</el-button>
          <el-button size="small">打印</el-button>
        </div>
        <el-card shadow="never" class="d2-mb">
          <template slot="header" style="height: 66px">
            <span class="title_x el-button--primary fl"></span>
            <p class="title_l fl">敞口趋势日明细表</p>
          </template>
          <el-table
            border
            :data="first_tableData"
            :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{
              background: '#eef1f6',
              'text-align': 'center'
            }"
            style="width: 100%"
          >
            <el-table-column
              prop="date"
              label="日期"
              sortable
            ></el-table-column>
            <!-- <el-table-column prop="depart_name" label="部门名称"></el-table-column> -->
            <el-table-column prop="name" label="品名"></el-table-column>
            <el-table-column
              prop="direction_name"
              label="方向"
            ></el-table-column>
            <el-table-column prop="exp_vol" label="敞口趋势"></el-table-column>
            <el-table-column
              prop="measure_unit_name"
              label="计量单位"
            ></el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="first_form.page"
              :page-size="first_form.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="first_form.pageTotal"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="敞口趋势月明细表" name="second">
        <el-card shadow="never" class="d2-mb">
          <el-form :inline="true" :model="second_form" class="demo-form-inline">
            <!-- <el-form-item label="部门名称">
              <el-select v-model="second_form.department" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in first_select_data_bm"
                    :key="item.department_id"
                    :label="item.department_name"
                    :value="item.department_id">
                  </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="品名">
              <el-select
                v-model="second_form.commodity"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in first_select_data_pm"
                  :key="item.commodity_id"
                  :label="item.name"
                  :value="item.commodity_id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向">
              <el-select
                v-model="second_form.direction"
                placeholder="请选择"
                clearable
              >
                <el-option label="采购" value="0"></el-option>
                <el-option label="销售" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期:">
              <el-date-picker
                type="date"
                v-model="second_form.start_date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
              -
              <el-date-picker
                type="date"
                clearable
                v-model="second_form.end_date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="select_fn_second()"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
        <div class="mb">
          <el-button size="small">导出</el-button>
          <el-button size="small">打印</el-button>
        </div>
        <el-card shadow="never" class="d2-mb">
          <template slot="header" style="height: 66px">
            <span class="title_x el-button--primary fl"></span>
            <p class="title_l fl">敞口趋势月明细表</p>
          </template>
          <el-table
            border
            :data="second_tableData"
            :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{
              background: '#eef1f6',
              'text-align': 'center'
            }"
            style="width: 100%"
          >
            <el-table-column
              prop="date"
              label="日期"
              sortable
            ></el-table-column>
            <!-- <el-table-column prop="depart_name" label="部门名称"></el-table-column> -->
            <el-table-column prop="name" label="品名"></el-table-column>
            <el-table-column
              prop="direction_name"
              label="方向"
            ></el-table-column>
            <el-table-column prop="diff" label="敞口趋势"></el-table-column>
            <el-table-column
              prop="measure_unit_name"
              label="计量单位"
            ></el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange_two"
              :current-page="second_form.page"
              :page-size="second_form.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="second_form.pageTotal"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </d2-container>
</template>
<script>
import { getExposure_trend, getExposure_filter } from "@/api/url";
export default {
  data() {
    return {
      activeName: "first",
      //第一块
      first_form: {
        type_name: "day",
        department: "",
        commodity: "",
        start_date: "",
        end_date: "",
        direction: "",
        page: 1,
        pageSize: 20,
        pageTotal: 0
      },
      first_select_data_bm: [],
      first_select_data_pm: [],
      first_tableData: [],
      second_form: {
        type_name: "month",
        department: "",
        commodity: "",
        start_date: "",
        end_date: "",
        direction: "",
        page: 1,
        pageSize: 20,
        pageTotal: 0
      },
      second_tableData: []
    };
  },
  created() {
    // getExposure_filter({type_name:"department"}).then(res =>{
    //   this.first_select_data_bm=res.result
    // })
    getExposure_filter({
      type_name: "commodity"
    }).then(res => {
      this.first_select_data_pm = res.result;
    });
    this.first_select_tableData();
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.select_fn();
      } else if (tab.name == "second") {
        this.select_fn_second();
      }
    },
    // 第一块
    first_select_tableData() {
      if (this.first_form.start_date == null) {
        this.first_form.start_date = "";
      }
      if (this.first_form.end_date == null) {
        this.first_form.end_date = "";
      }
      getExposure_trend(this.first_form).then(res => {
        this.first_tableData = res.result.results;
        this.first_form.pageTotal = res.result.count;
      });
    },
    select_fn() {
      this.first_form.page = 1;
      this.first_select_tableData();
    },
    handleCurrentChange(val) {
      this.first_form.page = val;
      this.first_select_tableData();
    },
    //第二块
    second_select_tableData() {
      if (this.second_form.start_date == null) {
        this.second_form.start_date = "";
      }
      if (this.second_form.end_date == null) {
        this.second_form.end_date = "";
      }
      getExposure_trend(this.second_form).then(res => {
        this.second_tableData = res.result.results;
        this.second_form.pageTotal = res.result.count;
      });
    },
    select_fn_second() {
      this.second_form.page = 1;
      this.second_select_tableData();
    },
    handleCurrentChange_two(val) {
      this.second_form.page = val;
      this.second_select_tableData();
    }
  }
};
</script>
<style scoped>
.el-pagination {
  text-align: center;
}
</style>
